<template>
    <div class="shop">
        <div class="line"></div>

        <el-row class="row_info">
            <el-col :span="1">
                <div class="left_info">会员姓名:</div>
            </el-col>
            <el-col :span="6">
               <div class="info" v-if="detail.name">{{detail.name}}</div>
               <div class="info" v-else>---</div>
            </el-col>

            <el-col :span="1">
                <div class="left_info">性别:</div>
            </el-col>
             <el-col :span="6">
               <div class="info" v-if="detail.sex == 1">男</div>
               <div class="info" v-else>女</div>
            </el-col>
        </el-row>

        <el-row class="row_info">
            <el-col :span="1">
                <div class="left_info">会员ID:</div>
            </el-col>
            <el-col :span="6">
               <div class="info info_gray" v-if="detail.uid">{{detail.uid}}</div>
               <div class="info info_gray" v-else>---</div>
            </el-col>
            <el-col :span="1">
                <div class="left_info">创建时间:</div>
            </el-col>
            <el-col :span="6">
               <div class="info info_gray" v-if="detail.createdAt">{{detail.createdAt}}</div>
               <div class="info info_gray" v-else>---</div>
            </el-col>
        </el-row>

        <el-row class="row_info">
            <el-col :span="1">
                <div class="left_info">渠道ID:</div>
            </el-col>
            <el-col :span="6">
               <div class="info info_gray" v-if="detail.relation_id">{{detail.relation_id}}</div>
               <div class="info info_gray" v-else>---</div>
            </el-col>
            <el-col :span="1">
                <div class="left_info">创建时间:</div>
            </el-col>
            <el-col :span="6">
               <div class="info info_gray" v-if="detail.create_time">{{detail.create_time}}</div>
               <div class="info info_gray" v-else>---</div>
            </el-col>
        </el-row>

        <el-row class="row_info">
            <el-col :span="1">
                <div class="left_info">生日:</div>
            </el-col>
            <el-col :span="6">
               <div class="info info_gray">{{detail.birthday}}</div>
            </el-col>
            <el-col :span="1">
                <div class="left_info">手机号:</div>
            </el-col>
            <el-col :span="6">
               <div class="info info_gray" v-if="detail.mobile">{{detail.mobile}}</div>
               <div class="info info_gray" v-else>---</div>
            </el-col>
        </el-row>

        <el-row class="row_info">
            <el-col :span="1">
                <div class="left_info">用户名:</div>
            </el-col>
            <el-col :span="6">
               <div class="info info_gray" v-if="detail.mobile">{{detail.mobile}}</div>
               <div class="info info_gray" v-else>---</div>
            </el-col>
            <el-col :span="1">
                <div class="left_info">用户身份:</div>
            </el-col>
            <el-col :span="6">
               <div class="info info_gray">{{roleName}}</div>
               <!-- <div class="info info_gray" v-if="detail.level == 1">小店会员</div>
               <div class="info info_gray" v-if="detail.level == 2">合伙人</div> -->
            </el-col>
        </el-row>

        <el-row class="row_info">
            <el-col :span="1.5">
                <div class="left_info">支付宝绑定:</div>
            </el-col>
            <el-col :span="5">
               <div class="info info_gray" v-if="detail.alipay_account">已绑定</div>
               <div class="info info_gray" v-else>未绑定</div>
            </el-col>
            <el-col :span="1.5">
                <div class="left_info">Openid:</div>
            </el-col>
            <el-col :span="8">
               <div class="info info_gray" v-if="detail.wechat_unionid">{{detail.wechat_unionid}}</div>
               <div class="info info_gray" v-else>---</div>
            </el-col>
        </el-row>


        <el-row class="row_info">
            <el-col :span="1.5">
                <div class="left_info">支付宝姓名:</div>
            </el-col>
            <el-col :span="5">
               <div class="info info_gray" v-if="detail.alipay_nick_name">{{detail.alipay_nick_name}}</div>
               <div class="info info_gray" v-else>---</div>
            </el-col>
            <el-col :span="1.5">
                <div class="left_info">Openid:</div>
            </el-col>
            <el-col :span="8">
               <div class="info info_gray" v-if="detail.wechat_unionid">{{detail.wechat_unionid}}</div>
               <div class="info info_gray" v-else>---</div>
            </el-col>
        </el-row>

        <el-row class="row_info">
            <el-col :span="1.5">
                <div class="left_info">支付宝账号:</div>
            </el-col>
            <el-col :span="5">
               <div class="info info_gray" v-if="detail.alipay_user_id">{{detail.alipay_user_id}}</div>
               <div class="info info_gray" v-else>---</div>
            </el-col>
            <el-col :span="1.5">
                <div class="left_info">上级Id:</div>
            </el-col>
            <el-col :span="5">
               <div class="info info_gray" v-if="detail.parentid">{{detail.parentid}}</div>
               <div class="info info_gray" v-else>---</div>
            </el-col>
        </el-row>

        <el-row class="row_info">
            <el-col :span="1.5">
                <div class="left_info">上级手机号:</div>
            </el-col>
            <el-col :span="6">
               <div class="info info_gray" v-if="detail.parent_mobile">{{detail.parent_mobile}}</div>
               <div class="info info_gray" v-else>---</div>
            </el-col>
        </el-row>

        <div class="line"></div>

         <el-table
        :data="detail.sellerList"
        style="width:100%"
        max-height="680"
        class="table_member_order"
        :cell-style="tc"
        :header-cell-style="tccolor"
      >
        <el-table-column label="SHOPID" prop="id"></el-table-column>
        <el-table-column label="会员店名称" prop="name"></el-table-column>
        <el-table-column label="会员店区域" prop="address"></el-table-column>
        <el-table-column label="有效截止时间">
            <template slot-scope="scope">
               {{scope.row.use_end_time}}
            </template>
        </el-table-column>
        <el-table-column label="当前状态">
            <template slot-scope="scope">
                <p v-if="scope.row.status == 0">禁用</p>
                <p v-if="scope.row.status == 1">有效</p>
                <p v-if="scope.row.status == 2">自动失效</p>
                <p v-if="scope.row.status == 3">退卡失效(自动申请)</p>
                <p v-if="scope.row.status == 4">退卡失效(系统)</p>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200" >
          <template slot-scope="scope">
            <span class="member_info"  @click="disableShopVip(scope.row.shop_id)">详情</span>
            <span class="member_info"  @click="refundVipFee(scope.row.shop_id)">强制退费</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
          <el-pagination
            background
            @current-change="pageChange"
            :current-page="page"
            :page-size="size"
            layout="total, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>

           <jdialog title="强制退费确认" :visible.sync='isForeceDel' width='600px;'>
        <div style="padding:20px;">
          <i class="el-icon-warning-outline" style="color:orange; font-size:24px;"></i> <span style="margin-left:8px;font-size:15px;">强制退费确认</span>
          <p style="padding:20px 0;font-size:14px;">点此操作后，会员在该店的会员费将会强制退费结算，并不具有会员身份</p>
          <div style="text-align:center;margin:0 0 12px 0;">
             <el-button size="mini" @click="isForeceDel = false">取消</el-button>
             <el-button size="mini" type="primary" @click="certainForeceDelAndRefunc">确认</el-button>
          </div>
        </div>
      </jdialog>


       <jdialog title="会员激励" :visible.sync='isDetailOrder' width='600px;'>
        <div style="padding:20px;">
             <el-table
        :data="detailData"
        style="width:100%"
        max-height="680"
        class="table_member_order"
        :cell-style="tc"
        :header-cell-style="tccolor"
      >
        <el-table-column label="加入时间" prop="use_start_time"></el-table-column>
        <el-table-column label="有效截止时间">
            <template slot-scope="scope">
               {{scope.row.use_end_time}}
            </template>
        </el-table-column>
        <el-table-column label="类型">
            <template slot-scope="scope">
                <p v-if="scope.row.order_type == 30">购买会员</p>
                <p v-if="scope.row.order_type == 31">续费会员</p>
            </template>
        </el-table-column>
        <el-table-column label="状态">
            <template slot-scope="scope">
                <p v-if="scope.row.status == 0">使用中</p>
                <p v-if="scope.row.status == 1">已失效</p>
            </template>
        </el-table-column>

        <el-table-column label="会员费">
            <template slot-scope="scope">
                ¥ {{scope.row.price}}
            </template>
        </el-table-column>

      </el-table>
      <div class="pagination">
          <el-pagination
            background
            @current-change="detailpageChange"
            :current-page="detailpage"
            :page-size="detailSize"
            layout="total, prev, pager, next, jumper"
            :total="detailTotal"
          ></el-pagination>
        </div>
        </div>
      </jdialog>
    </div>
</template>

<script>
import {
  shopVipRelationDetail
} from '@/api/store'
// import { userProfileData, userShopVipList,refundVipCardMoney,userShopVipOrderList} from "@/api/member";
export default {
    data(){
        return {
           mid:'',
           tableData: [],
           page: 1,
           size: 20,
           total: 0,
           detail: {},
           isForeceDel:false,
           shopId:'',


           isDetailOrder:false,
           detailpage:1,
           detailSize:20,
           detailTotal:0,
           detailData:[]
       }
    },
    mounted(){
        this.mid = this.$route.query.mid
        if(this.mid){
            this.getuserProfileData();
            // this.getuserShopVipListData();
        }
    },
    methods:{
        async getuserProfileData() {
          var url = "id=" + this.mid;
          let res = await shopVipRelationDetail(this.mid);
          if (res.code === 200) {
            this.detail = res.data;
          } else {
            this.$message.error(res.message);
          }
        },
        //获取已经加入小店会员
        async getuserShopVipListData() {
          var url =
                   "uid=" + this.mid + "&page=" + this.page + "&size=" + this.size;

          let res = await userShopVipList(url);
          if (res.code === 200) {
            this.tableData = res.data.data;
            this.total = res.data.total;
          } else {
            this.$message.error(res.message);
          }
        },

        //会员退费
        refundVipFee(shopId){
          this.shopId = shopId
          this.isForeceDel = true
        },
        certainForeceDelAndRefunc(){
          this.refundVipCardMoneyData()
        },

        async  refundVipCardMoneyData(){
            let res = await refundVipCardMoney({shop_id:this.shopId,uid:this.mid})
            if(res.code === 10000){
                this.$message.success(res.message)
                this.getuserShopVipListData()
                this.isForeceDel = false
            }else{
                this.$message.error(res.message)
            }
        },
        pageChange(page) {
          this.page = page;
          this.getuserShopVipListData();
        },

        detailpageChange(page) {
          this.detailpage = page;
          this.getuserShopVipOrderListData();
        },

        //详情
        async getuserShopVipOrderListData(){
            var url = 'uid='+this.mid+
                      '&shop_id='+this.shopId+
                      '&page='+this.detailpage+
                      '&size='+this.detailSize
          let res = await userShopVipOrderList(url)
          if(res.code === 10000){
              this.detailTotal = res.data.total
              this.detailData = res.data.data
          }else{
              this.$message.error(res.message)
          }
        },

        //已加入会员激励列表
        disableShopVip(shopId){
            this.shopId = shopId
             this.isDetailOrder = true
           this.getuserShopVipOrderListData()
        },
        tc() {
            return "text-align:center; color:#333333; font-size:12px;";
        },
        tccolor() {
            return "text-align:center;background-color:#f5f5f5; font-size:14px;";
        },
    }

}
</script>

<style lang="scss" scoped>
.shop{
    padding: 20px;
    .line{
        margin: 20px 0 32px 0;
        height: 1px;
        background-color: #e6e6e6;
    }
    .left_info{
        float: left;
        margin-top: 4px;
        color: #333;
        font-size: 14px;
    }
    .info{
        float: left;
        margin-left: 10px;
        width: 260px;
        height: 28px;
        line-height: 28px;
        color: #666;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        padding-left: 12px;
    }
    .info_gray{
        background-color: #f5f5f5;
    }
    .row_info{
        margin-top: 24px;
    }
    .member_info{
        color: #f4222d;
        font-size: 13px;
        cursor: pointer;
        margin-right: 20px;
    }
    .pagination {
    float: right;
    margin:10px 0px;
    }
}
</style>
